<template>
  <div class="genshin-rank-container">
    <!-- 榜单导航 -->
    <div class="rank-nav">
      <h2 class="title">提瓦特角色强度榜</h2>
      <div class="nav-tabs">
        <div 
          v-for="(tab, index) in tabs"
          :key="index"
          class="tab-item"
          :class="{ active: activeTab === index }"
          @click="switchTab(index)"
        >
          {{ tab }}
        </div>
      </div>
    </div>

    <!-- 榜单主体 -->
    <div class="rank-list">
      <!-- 榜单头部 -->
      <div class="list-header">
        <span class="rank">排名</span>
        <span class="character">角色</span>
        <span class="info">元素/地区</span>
        <span class="strength">强度评分</span>
      </div>

      <!-- 动态渲染榜单项 -->
      <div 
        class="list-item"
        v-for="(item, index) in currentRankData"
        :key="item.id"
        @click="viewCharacterDetail(item.id)"
      >
        <div class="rank-index">
          <span class="number">{{ index + 1 }}</span>
          <!-- 前3名特殊标识 -->
          <span v-if="index < 3" :class="['medal', 'medal-' + (index + 1)]">{{ index + 1 }}</span>
        </div>
        <div class="character-info">
          <img :src="item.avatar" class="portrait">
          <div class="text">
            <h3 class="name">{{ item.name }}</h3>
            <p class="rarity">{{ item.rarity }}</p>
          </div>
        </div>
        <div class="element-info">
          <span class="element" :class="'element-' + item.element.toLowerCase()">{{ item.element }}</span>
          <span class="region">{{ item.region }}</span>
        </div>
        <div class="strength-score">
          <div 
            class="score-bar" 
            :style="{ width: item.score + '%' }"
          ></div>
          <span class="score-value">{{ item.score }}分</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()

// 榜单导航数据
const tabs = ref(['深渊使用率', '综合强度', '新手推荐'])
const activeTab = ref(0)

// 原神角色强度数据
const rankData = ref([
  // 深渊使用率榜单
  [
    {
      id: 1,
      name: '纳西妲',
      avatar: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.RqlOfv2SA81CBrXrklo2BAHaHa?r=0&rs=1&pid=ImgDetMain&cb=idpwebpc1',
      element: '草',
      region: '须弥',
      rarity: '5星',
      score: 95,
      isHot: true
    },
    {
      id: 2,
      name: '雷电将军',
      avatar: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.H8xhm7kM3h79Lud6IlZnTAHaHa?r=0&rs=1&pid=ImgDetMain&cb=idpwebpc1',
      element: '雷',
      region: '稻妻',
      rarity: '5星',
      score: 92,
      isHot: true
    },
    {
      id: 3,
      name: '钟离',
      avatar: 'https://upload-bbs.mihoyo.com/upload/2021/04/17/11316600/4964cbe9743bddf535cfed0f8c3b9029_9106761612558172602.png?x-oss-process=image/resize,s_600/quality,q_80/auto-orient,0/interlace,1/format,png',
      element: '岩',
      region: '璃月',
      rarity: '5星',
      score: 90,
      isHot: true
    },
    {
      id: 4,
      name: '那维莱特',
      avatar: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.ZuUI1Dz-Lbpr2E1j8_VQLAHaEK?r=0&rs=1&pid=ImgDetMain&cb=idpwebpc1',
      element: '水',
      region: '枫丹',
      rarity: '5星',
      score: 88,
      isHot: false
    },
    {
      id: 5,
      name: '夜兰',
      avatar: 'https://upload-bbs.mihoyo.com/upload/2022/05/25/11316600/d3d98f07dd8e3e7bdf44d6165ed4d7fb_1539336182952855446.png?x-oss-process=image/resize,s_600/quality,q_80/auto-orient,0/interlace,1/format,png',
      element: '水',
      region: '璃月',
      rarity: '5星',
      score: 85,
      isHot: false
    },
     {
      id: 6,
      name: '珊瑚宫心海',
      avatar: 'https://upload-bbs.miyoushe.com/upload/2021/09/22/108449504/8c1d1c356ad51e8e4858aa5f85a2d147_4716715326269645915.jpg',
      element: '水',
      region: '稻妻',
      rarity: '5星',
      score: 83,
      isHot: false
    }
  ],
  // 综合强度榜单
  [
    {
      id: 7,
      name: '甘雨',
      avatar: 'https://i.bobopic.com/tx_bobopic/121316910_bobopic.jpg',
      element: '冰',
      region: '璃月',
      rarity: '5星',
      score: 93,
      isHot: true
    },
    {
      id: 8,
      name: '胡桃',
      avatar: 'https://i01piccdn.sogoucdn.com/480790c2065fda4f',
      element: '火',
      region: '璃月',
      rarity: '5星',
      score: 92,
      isHot: true
    },
    {
      id: 9,
      name: '神里绫华',
      avatar: 'https://upload-bbs.mihoyo.com/upload/2022/04/26/288360185/63b7370927a383452932677aa832b540_7408665124305769734.jpg?x-oss-process=image/resize,s_600/quality,q_80/auto-orient,0/interlace,1/format,jpg',
      element: '冰',
      region: '稻妻',
      rarity: '5星',
      score: 91,
      isHot: true
    },
    {
      id: 10,
      name: '达达利亚',
      avatar: 'https://upload-bbs.mihoyo.com/upload/2021/04/16/75276550/4702144aeb9fd3aff2428617deb16a9d_8978957798045681852.png?x-oss-process=image/resize,s_600/quality,q_80/auto-orient,0/interlace,1/format,png',
      element: '水',
      region: '至冬',
      rarity: '5星',
      score: 89,
      isHot: false
    },
    {
      id: 11,
      name: '魈',
      avatar: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.vL5eMXY45VEgAvaLhyfxtAHaHa?r=0&rs=1&pid=ImgDetMain&cb=idpwebpc1',
      element: '风',
      region: '璃月',
      rarity: '5星',
      score: 87,
      isHot: false
    }
  ],
  // 新手推荐榜单
  [
    {
      id: 12,
      name: '香菱',
      avatar: 'https://upload-bbs.miyoushe.com/upload/2022/09/05/6625094/04b470f870324d3a6b7f579442a1aca6_628221370956020101.jpg',
      element: '火',
      region: '璃月',
      rarity: '4星',
      score: 90,
      isHot: true
    },
    {
      id: 13,
      name: '行秋',
      avatar: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.dB0QE7AayT963Xgvh2etrgAAAA?r=0&rs=1&pid=ImgDetMain&cb=idpwebpc1',
      element: '水',
      region: '璃月',
      rarity: '4星',
      score: 88,
      isHot: true
    },
    {
      id: 14,
      name: '班尼特',
      avatar: 'https://i.bobopic.com/small/88138635.jpg',
      element: '火',
      region: '蒙德',
      rarity: '4星',
      score: 87,
      isHot: true
    },
    {
      id: 15,
      name: '雷泽',
      avatar: 'https://img-baofun.zhhainiao.com/pcwallpaper_ugc_mobile/static/3f7aa3c094144024d0de4b7b5b2447ed.jpeg?x-oss-process=image%2fresize%2cm_lfit%2cw_640%2ch_1138',
      element: '雷',
      region: '蒙德',
      rarity: '4星',
      score: 85,
      isHot: false
    },
    {
      id: 16,
      name: '诺艾尔',
      avatar: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.fX1rXtYiKVUk5nZX4aHtzAHaHa?r=0&rs=1&pid=ImgDetMain&cb=idpwebpc1',
      element: '岩',
      region: '璃月',
      rarity: '4星',
      score: 83,
      isHot: false
    },
    {
      id: 17,
      name: '凝光',
      avatar: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.rwifECnEGRlIqRm37Qot9AHaHa?r=0&rs=1&pid=ImgDetMain&cb=idpwebpc1',
      element: '岩',
      region: '璃月',
      rarity: '4星',
      score: 81,
      isHot: false
    }
  ]
])

// 获取当前榜单数据
const currentRankData = computed(() => {
  return rankData.value[activeTab.value]
})

// 切换标签页
const switchTab = (index) => {
  activeTab.value = index
}

// 查看角色详情
const viewCharacterDetail = (id) => {
  console.log('查看角色详情', id)
  router.push({ name: 'characterDetail', query: { id } })
}
</script>

<style scoped>
.genshin-rank-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  background: linear-gradient(to bottom, #f0f9ff, #e0f2fe);
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(22, 93, 255, 0.15);
}

/* 导航样式 */
.rank-nav {
  margin-bottom: 30px;
  border-bottom: 2px solid #d6e8ff;
}

.title {
  font-size: 28px;
  color: #165DFF;
  margin-bottom: 15px;
  font-weight: 600;
  position: relative;
  display: inline-block;
  text-shadow: 0 1px 2px rgba(22, 93, 255, 0.2);
}

.title::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 120px;
  height: 3px;
  background: linear-gradient(90deg, #165DFF, #40C4FF);
  border-radius: 3px;
}

.nav-tabs {
  display: flex;
  gap: 20px;
  padding-top: 10px;
}

.tab-item {
  padding: 8px 20px;
  cursor: pointer;
  border-radius: 20px;
  transition: all 0.3s;
  font-size: 15px;
  font-weight: 500;
  color: #4096FF;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 2px 10px rgba(22, 93, 255, 0.1);
  position: relative;
  overflow: hidden;
}

.tab-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transition: all 0.6s;
}

.tab-item:hover::before {
  left: 100%;
}

.tab-item.active {
  background: linear-gradient(135deg, #165DFF, #40C4FF);
  color: white;
  box-shadow: 0 4px 15px rgba(22, 93, 255, 0.25);
}

/* 榜单列表样式 */
.list-header {
  display: grid;
  grid-template-columns: 80px 3fr 2fr 120px;
  padding: 15px 20px;
  background: white;
  font-weight: 500;
  color: #666;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(22, 93, 255, 0.08);
}

.list-item {
  display: grid;
  grid-template-columns: 80px 3fr 2fr 120px;
  align-items: center;
  padding: 15px 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(22, 93, 255, 0.05);
  margin-bottom: 10px;
  transition: all 0.3s;
  cursor: pointer;
}

.list-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(22, 93, 255, 0.12);
}

/* 排名样式 */
.rank-index {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  .number {
    font-size: 18px;
    color: #999;
    z-index: 2;
  }
  
  .medal {
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    font-weight: bold;
    color: white;
    z-index: 1;
  }
  
  .medal-1 { background: linear-gradient(135deg, #FFD700, #B8860B); box-shadow: 0 0 15px rgba(255, 215, 0, 0.6); }
  .medal-2 { background: linear-gradient(135deg, #C0C0C0, #808080); box-shadow: 0 0 10px rgba(192, 192, 192, 0.6); }
  .medal-3 { background: linear-gradient(135deg, #CD7F32, #FFD700); box-shadow: 0 0 10px rgba(205, 127, 50, 0.6); }
}

/* 角色信息 */
.character-info {
  display: flex;
  align-items: center;
  gap: 15px;

  .portrait {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }

  .text {
    .name {
      font-size: 17px;
      color: #333;
      margin-bottom: 4px;
      font-weight: 600;
    }

    .rarity {
      font-size: 13px;
      color: #999;
    }
  }
}

/* 元素信息 */
.element-info {
  display: flex;
  align-items: center;
  gap: 10px;

  .element {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    color: rgb(22, 16, 16);
  }
  
  .element-fire { background: #FF5722; }
  .element-water { background: #2196F3; }
  .element-ice { background: #90CAF9; }
  .element-electric { background: #FF9800; }
  .element-wind { background: #4CAF50; }
  .element-rock { background: #795548; }
  .element-grass { background: #8BC34A; }

  .region {
    font-size: 14px;
    color: #666;
  }
}

/* 强度评分 */
.strength-score {
  position: relative;
  height: 24px;
  background: #e0f2fe;
  border-radius: 12px;
  overflow: hidden;

  .score-bar {
    height: 100%;
    background: linear-gradient(90deg, #165DFF, #40C4FF);
    transition: width 0.5s ease;
    border-radius: 12px;
  }

  .score-value {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: #165DFF;
    font-weight: 500;
  }
}

@media (max-width: 768px) {
  .genshin-rank-container {
    padding: 15px;
  }
  
  .list-header,
  .list-item {
    grid-template-columns: 60px 2fr 1.5fr 80px;
  }
  
  .character-info {
    gap: 10px;
    .portrait {
      width: 50px;
      height: 50px;
    }
  }
  
  .title {
    font-size: 24px;
  }
  
  .nav-tabs {
    gap: 10px;
    .tab-item {
      padding: 8px 15px;
      font-size: 13px;
    }
  }
}
</style>